<template>
	<view>
		<uni-popup ref="bgListRef" type="center" border-radius="10px 10px 0 0">
			<view class="bg-white rounded-lg p-40" style="width: 570rpx;">
				<view class="flex justify-center">
					<text class="font-bold">更换背景</text>
				</view>
				<view class="">
					<text class="text-sm" style="color: #999999;">请选择背景</text>
					<view class="mt-1" style="height: 400rpx;">
						<scroll-view scroll-y="true">
							<view class="flex flex-wrap">
								<view class="rounded-lg" :class="[bgObj?.index==i&&'currBg']"
									style="margin-left: 20rpx;margin-bottom: 20rpx;" @click="onBg({
										...e,
										index:i
									})" v-for="e,i in bgList" :key="i">
									<image :src="e.icon" mode="aspectFit" style="width: 76rpx;height: 76rpx;"></image>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="flex justify-between">
						<image @click="close" src="/static/live/private/no.png" mode="aspectFit"
							style="width: 220rpx;height: 60rpx;">
						</image>
						<image @click="onSave" src="/static/live/private/yes.png" mode="aspectFit"
							style="width: 220rpx;height: 60rpx;">
						</image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const bgList = [{
		icon: "/static/live/private/bg1.png",
		bg: ""
	}, {
		icon: "/static/live/private/bg2.png",
		bg: ""
	}, {
		icon: "/static/live/private/bg3.png",
		bg: ""
	}, {
		icon: "/static/live/private/bg4.png",
		bg: ""
	}, {
		icon: "/static/live/private/bg5.png",
		bg: ""
	}]
	const bgListRef = ref()
	const bgObj = ref()
	const onBg = (val) => {
		bgObj.value = val
	}
	const open = () => {
		bgListRef.value.open()
	}
	const close = () => {
		bgListRef.value.close()
	}
	const emit = defineEmits(['onSave'])
	const onSave = () => {
		close()
		emit('onSave', bgObj.value)
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="less" scoped>
	.currBg {
		border: 1px solid #329EFF;
	}
</style>